<template>
  <div>
    <el-row style="margin: 0 16px" v-if="bigData.name">
      <el-col class="bg-logo" :span="24">
        <img src="../../static/images/logo.png" width="100%" alt="包头市驾驶人培训大数据平台logo">
        <span class="syn-num">实时数据</span>
      </el-col>
      <el-col :span="6">
        <baseData :baseData="bigData.baseData"></baseData>
        <registerTotals :regCount="bigData.regCount"></registerTotals>
        <registerStatistics :regCount="bigData.regCount"></registerStatistics>
      </el-col>
      <el-col :span="12">
        <mechanismDistribution :trainAnalyse="bigData.trainAnalyse"></mechanismDistribution>
        <institutionalGrowth ></institutionalGrowth>
        <carGrowth :carUp="bigData.carUp"></carGrowth>
      </el-col>
      <el-col :span="6">
        <trainingWarning :gradList="bigData"></trainingWarning>
        <teacherGrowth :teacherUp="bigData.teacherUp"></teacherGrowth>
      </el-col>
    </el-row>
    <el-row class="loading"
      v-else v-loading="loading" 
      element-loading-text="程序正在加载中，请稍等..."
      element-loading-background="rgba(0, 0, 0, 0.8)">
    </el-row>
  </div>
</template>

<script>
import baseData from "@/components/baseData";
import registerTotals from "@/components/registerTotals";
import registerStatistics from "@/components/registerStatistics";
import mechanismDistribution from "@/components/mechanismDistribution";
import institutionalGrowth from "@/components/institutionalGrowth";
import carGrowth from "@/components/carGrowth";
import trainingWarning from "@/components/trainingWarning";
import teacherGrowth from "@/components/teacherGrowth";
export default {
  name: "bigdata",
  components: {
    baseData,
    registerTotals,
    registerStatistics,
    mechanismDistribution,
    institutionalGrowth,
    carGrowth,
    trainingWarning,
    teacherGrowth
  },
  mounted() {
    let HT = $(document).height();
    $(".loading").height(HT);
    let that = this;
    $.extend(that.$websocket._settings.events, {
      receiveMessage(d) {
        that.bigData = $.extend(d, {
          jyl: (d.trainAnalyse.countGrad/d.trainAnalyse.countReg*100).toFixed(1)
        });
        // console.info(JSON.parse(JSON.stringify(d)), JSON.parse(JSON.stringify(that.bigData)));
        that.loading = false;
      }
    });

    that.$websocket.connect();
  },
  data() {
    return {
      loading: true,
      bigData: {}
    };
  }
};
</script>

<style scoped>
.bg-logo{
  position: relative;
}
.syn-num{
  width: 100px;
  color: orange;
  position: absolute;
  top: 120px;
  left: 50%;
  margin-left: -50px;
  font-size: 24px;
}
</style>


